<template>
	<view class="outside" @click="handlerClick(id)">
		<image :src="logo" mode="widthFix"></image>
		<view class="center"></view>
		<view class="name"><text>{{name}}</text></view>
	</view>
</template>

<script>
	export default {
		props: {
			logo: String,
			name: String,
			id: String
		},
		methods: {
			handlerClick(id) {
				if (id) {
					this.$emit('goTo', 'index', id)
				}
			}
		}
	}
</script>

<style>
	.outside {
		background: #B9AC90;
		width: 100%;
		height: 180rpx;
		display: flex;
		align-items: center;
		margin-bottom: 40rpx;
	}

	.outside image {
		width: calc(100% - 280rpx);
		margin: 0 40rpx;
	}

	.center {
		width: 1rpx;
		height: 60rpx;
		background: #ffffff66;
	}

	.name {
		margin-left: 50rpx;
		width: 100rpx;
		height: 40rpx;
		text-align: center;
		line-height: 30rpx;
		/* border-left: 1rpx solid #eee; */
		color: #fff;
		font-size: 32rpx;
		background: #AE6059;
		border-radius: 5rpx;
	}

	.name text {
		/* line-height: 40rpx; */
		/* height: 40rpx; */
		font-size: 24rpx;
	}
</style>
